<script lang="ts" setup>
import { ref } from 'vue'
import Department from '@/api/department'

const props = defineProps({
  changeSelectParams: {
    type: Function
  }
})
const tips = ref({})
const keyword = ref('')
const departmentChecks = ref([])
const socialSecurityChecks = ref([])
const providentFundChecks = ref([])
const cityList = ref([
  '北京',
  '上海',
  '深圳',
  '天津',
  '重庆',
  '珠海',
  '广州',
  '西安'
])
const departmentList = ref([] as any)

// 获取城市
const getCityList = async () => {
  // this.cityList = []
}

// 获取组织架构
const getDepartment = async () => {
  var res: any = await Department.getDepartmentService()
  departmentList.value = res
}
getDepartment()

const checkChange = () => {
  const selectParams = {
    departmentChecks: departmentChecks.value,
    socialSecurityChecks: socialSecurityChecks.value,
    providentFundChecks: providentFundChecks.value
  }
  props.changeSelectParams && props.changeSelectParams(selectParams)
}
</script>

<template>
  <div class="cont-top-box">
    <el-form label-width="100px">
      <el-form-item label="部门">
        <el-checkbox-group
          v-model="departmentChecks"
          style="display: inline-block"
        >
          <el-checkbox
            v-for="item in departmentList"
            :key="item.id"
            :value="item.id"
            @change="checkChange"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="社保城市">
        <el-checkbox-group
          v-model="socialSecurityChecks"
          style="display: inline-block"
        >
          <el-checkbox
            v-for="item in cityList"
            :key="item"
            :value="item"
            @change="checkChange"
            >{{ item }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="公积金城市">
        <el-checkbox-group
          v-model="providentFundChecks"
          style="display: inline-block"
        >
          <el-checkbox
            v-for="item in cityList"
            :key="item"
            :value="item"
            @change="checkChange"
            >{{ item }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
.cont-top-box {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
